<!--
 * @Author: zzr
 * @Date: 2025-01-22 10:43:55
 * @LastEditors: zzr
 * @Description: 
-->
<template>
  <el-dialog v-model="dialogVisible" :title="dialogTitle" @close="closed">
    <div class="flex-h flex-center h-[80vh]">
      <el-image
        v-if="formType == '/mj'"
        class="h100"
        :src="imgPath"
        fit="cover"
      ></el-image>
      <MusicPlayer
        v-if="formType == '/aiMusic'"
        :value="songIndex"
        @update:modelValue="($event) => (songIndex = $event)"
        ref="playerRef"
        :songs="musicPath"
      ></MusicPlayer>
      <VideoPlayer
        v-if="formType == '/video'"
        :src="videoPath"
        :options="playerOptions"
        :autoplay="true"
      ></VideoPlayer>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
        class="liner-btn-opacity liner-btn"
        type="primary"
        @click="submitForm"
        v-loading="formLoading"
        >开始去创作</el-button
      >
    </template>
  </el-dialog>
</template>
<script setup>
import { userApplyCreate } from "@/api/user";
import { onMounted, ref, watch, computed, nextTick, reactive } from "vue";
import { useUserStore } from "@/store/user";
import { storeToRefs } from "pinia";
// import { FormRules } from 'element-plus'
import { useMessage } from "@/hooks/web/useMessage";
import MusicPlayer from "./MusicPlayer.vue";
import { VideoPlayer } from "@videojs-player/vue";
defineOptions({ name: "welcomeDialog" });
let { imgPath, musicPath, videoPath, songIndex } = defineProps({
  imgPath: {
    type: String,
  },
  videoPath: {
    type: String,
  },
  musicPath: {
    type: Array,
  },
  songIndex: { default: 0 },
});
const userStore = useUserStore();
let { getUserInfo, getMenu } = storeToRefs(userStore);
const message = useMessage(); // 消息弹窗
const playerRef = ref();
const play = (item, i) => {
  nextTick(() => playerRef.value.play());
};
const dialogVisible = ref(false); // 弹窗的是否展示
const dialogTitle = ref(""); // 弹窗的标题
const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref(""); // 表单的类型：create - 新增；update - 修改
const formData = ref({
  applyRemark: undefined,
  computingPower: undefined,
  accountEndDate: undefined,
  applyComputingPower: undefined,
});
// 视频播放器配置
let playerOptions = ref({
  height: 1100,
  // width: document.documentElement.clientWidth, //播放器宽度
  playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
  muted: false, // 默认情况下将会消除任何音频。
  loop: false, // 导致视频一结束就重新开始。
  preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
  language: "zh-CN",
  aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
  fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
  notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  controls: true,
  controlBar: {
    timeDivider: true,
    durationDisplay: true,
    remainingTimeDisplay: false,
    fullscreenToggle: true, // 全屏按钮
  },
});
const formRules = reactive({
  // applyRemark: [{ required: true, message: "企业名称不能为空", trigger: "blur" }],
  computingPower: [
    { required: true, message: "企业算力不能为空", trigger: "blur" },
  ],
  applyComputingPower: [
    { required: true, message: "申请算力不能为空", trigger: "blur" },
  ],
  accountEndDate: [
    { required: true, message: "账号截止日期不能为空", trigger: "blur" },
  ],
});
const formRef = ref(); // 表单 Ref
/** 打开弹窗 */
const open = async (type, id) => {
  dialogVisible.value = true;
  dialogTitle.value = "详情";
  formType.value = type;
  if (type=='/aiMusic') {
    play()
  }
  resetForm();
  // 修改时，设置数据
  if (id) {
    formLoading.value = true;
    try {
      formData.value = await UserApi.getDept(id);
    } finally {
      formLoading.value = false;
    }
  }
};
const closed = (params) => {
  // musicPath.value = [];
  formType.value = "";
};
defineExpose({ open }); // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(["success"]); // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // // 校验表单
  // if (!formRef) return;
  // const valid = await formRef.value.validate();
  // if (!valid) return;
  // // 提交请求
  // formLoading.value = true;
  // try {
  //   const data = formData.value;
  //   await userApplyCreate({
  //     applyUserPhone: getUserInfo.value.mobile,
  //     applyRemark: data.applyRemark,
  //     applyComputingPower: data.applyComputingPower,
  //     applyType: formType.value === "power" ? 1 : 2,
  //   });
  //   message.success("申请成功");
  //   dialogVisible.value = false;
  //   // 发送操作成功的事件
  //   emit("success");
  // } finally {
  //   formLoading.value = false;
  // }
  emit("success", formType.value);
};

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    applyRemark: undefined,
    computingPower: undefined,
    accountEndDate: undefined,
    applyComputingPower: undefined,
  };
  formRef.value?.resetFields();
};

// 时间组件 只能选择今天之后的日期
const disabledDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7;
};
</script>
